import React,{Component} from 'react'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
//import Switch, {Case,Default} from 'react-switch-case';
import $ from 'jquery';
import videojs from 'video.js';
// import Layer from '../Layer'

class CourseManages extends Component {
	constructor(args) {
		super()
		this.state = {
			radioList:[],
			checkList:[],
			course: {},
			visible:false,
			jobTree:[],
			result:false,
			singleList:[],
			multipleList: [],
			titleList:{},
			categoriesList:[],
			courseattach:[]

		}
			
	}
	componentWillMount() {
		fetch.clickCheck(this.props.params.id).then((data) => {
			
			// if(data.result !== 'RC100'){
			// 	message.error(data.errMsg, 3);
			// 	return;
			// }
			let single = [],
				multiple = [];
			for (let x of data.titleList) {
				if (x.titleType === '1') {
					single.push(x);
				} else {
					multiple.push(x);
				}
			}
			this.setState({
				course: data.coursedata,
				jobTree:data.jobTree,
				titleList: data.titleList,
				singleList: single,
				multipleList: multiple,
				categoriesList:data.categoriesList.categoriesList,
				courseattach:data.courseattach
			},()=>{
				let course = this.state.course;
				const videoJsOptions = {
			            autoplay: true,
			            controls: true,
			            playsinline: false,
			            sources: [{
			                src: course.coursevideoPath,
			                type: 'video/mp4'
			            }]
			          }
			    videojs(this.refs.course_player, videoJsOptions).play();
				//console.log(course);
				let jobTree = [];
				if (course.jobLevel === '' || course.jobLevel === null) {
					// jobTree.length = 0;
				} else {
					jobTree = course.jobLevel.split(',')
				}
			
		
				let flag = course.elecReqCourse === '0';
						if(this.state.course.checkState === '2'){
							$('input[type="radio"][name="result"]')[1].checked = true;
						}else{
							$('input[type="radio"][name="result"]')[0].checked = true;
							
							this.setState({result:true},()=>{
								$('input[type="radio"][name="elecReqCourse"]')[flag ? 0 : 1].checked = true;
							});
						}
						
						
						if (!flag) {
							this.setState({
								visible: true
							}, () => {
								for (let i in jobTree) {
									$('.check-box').find(`input[type='checkbox'][name=jobLevel${jobTree[i]}]`)[0].checked = true;
								}
							
							})
						}

						
			this.disable();
			})

		}, (res) => {
			pub.reject(res);
		})
	}

	disable() {
		$('.topic').find('input').each(function(index, el) {
			el.disabled = true;
			// $(el).attr("disabled", "disabled");
		});
	}

	render() {
		let course = this.state.course;

		return (
			<div className="container">
				<div className="common-title">课程审核
				</div>
				
				<div className="video-container bg-FFFFFF box-shadow clearFix">
					<div className="video-box">
						{/*<video src={pub.getFile(course.coursevideoPath)}
						 controls="controls"  width="550" height="315" 
						  preload="auto">
							您的浏览器不支持 video 标签。
						</video>*/}
						<video
			                  width="550"
			                  height="315"
			                  //poster={require('../../style/images/video-error.png')}
			                  ref="course_player"
			                  className="video-js"
			                  controls="controls"
                  		></video>
					</div>
					<div className="v-info">
						<div className="v-cont">
						    <h3>&lceil;<span>{course.userRealName}</span>&rfloor;<span className='shorthand' >{pub.subString(course.courseName,20)}</span></h3>
					         <div>{pub.formatTimestamp(course.createTime)}</div>
							 <h3><span>课程介绍</span></h3>
							<p className='shorthand'>{course.courseDesc}</p>
						</div>
						<div className="enclosure">
						<h3>课程附件</h3>
						<ul>
						    {this.state.courseattach.map((attach,index)=>{
						    	return(
						    		   <a key={index} download={attach.courseattachUniquene} href={pub.getFile(attach.courseattachUniquene)}>{attach.courseAttrachPath}</a>
						    		)
						    })}
						</ul>
					</div>
					</div>
				</div>

			<div className="row bg-FFFFFF box-shadow mar-t-20 pad-l-20 pad-r-20">

					<h3 style={{borderBootm:'1px solid #dee6f4',padding:'10px'}} className="mar-b-20">课程范围</h3>
					<div className="range">
						<label>课程渠道：
								
								{
									pub.courseChannel.map((type,index)=>{
										return(
											<div key={index}>{course.courseChannel === (index).toString()?<span>{type}</span>:null}</div>
										)
									})
								}
						</label>
						<label>课程分类：
						{
							this.state.categoriesList.map((type,index)=>{
							    	return(
							    		<div key={index}>{course.courseType === type.code?<span>{type.name}</span>:null}</div>
							    		)
							    })
						}
						</label>
					</div>

					<h3 style={{borderBottom:'1px solid #DEE6F4',padding:'10px'}} className="mar-b-20">课程考题</h3>
					<div className="topic radio-topic mar-b-20">
					    <h3>单项选择题：</h3>
					    {this.state.singleList.map((item,index)=>{
					    	return(
					  	       <dl key={index}>
					  	       	<dt style={{"fontWeight":"normal",color:"#222"}}>{index + 1}、{item.title}</dt>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>A.{item.A}</label></dd>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>B.{item.B}</label></dd>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>C.{item.C}</label></dd>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>D.{item.D}</label></dd>
					  	       </dl>
					    		)
					    })}
					</div>
					<div className="topic MultipleQuestion check-topic">
					    <h3>多选选择题：</h3>
					    {this.state.multipleList.map((item,index)=>{
					  	return(
						       <dl key={index}>
						       	<dt style={{"fontWeight":"normal",color:"#222"}}>{index + 1}、{item.title}</dt>
						       	<dd><label><input type="checkbox" disabled="disabled"/>A.{item.A}</label></dd>
						       	<dd><label><input type="checkbox" disabled="disabled"/>B.{item.B}</label></dd>
						       	<dd><label><input type="checkbox" disabled="disabled"/>C.{item.C}</label></dd>
						       	<dd><label><input type="checkbox" disabled="disabled"/>D.{item.D}</label></dd>
						       </dl>
					  		)
					  })}
					</div>
					<div className="topic mar-b-20">
						<dl>
							<dt>审核结果</dt>
							<dd> 

							  <label><input type="radio" required="required" disabled={true} name="result" value="1"/>通过</label>
							  <label><input type="radio" required="required"  disabled={true} name="result" value="2"/>不通过</label>

							  {this.state.result?<label>学习积分：<input disabled={true} type="number" defaultValue={course.studyIntegral} required="required" ref='studyIntegral'/></label>:null}
							  </dd>
						</dl>

						{this.state.result?
						<dl>
							<dt>课程级别</dt>
							<dd>
							  <label><input disabled={true}  type="radio" required="required" name="elecReqCourse" value="0"/>选修</label>
							  <label><input disabled={true} type="radio" required="required" name="elecReqCourse" value="1"/>必修</label>
							</dd>
						</dl>
						:null}

						{this.state.visible&&this.state.result?
					     <div className="pop-box-1" style={{paddingBottom:'0px'}}>
						   <div className="check-box" style={{height:'auto'}}>
						    {this.state.jobTree.map((job,index)=>{
						    	return( 
						    		    <label key={index} id="job_Tree"><input disabled={true} type="checkbox" name={'jobLevel'+job.jobCode} value={job.jobCode} />{job.jobName}</label>
						    		)
						    })}
				           </div>
			            </div>
			            :
			           null
			            }
			            
						<dl>
							<dt>审核意见</dt>
							<dd><textarea disabled={true}  value={course.checkReason} ref="checkReason" onKeyUp={this.numberInputs}></textarea></dd>
						</dl>
			            

					</div>

{/*                   <div className="topic">
					 <div>课程级别: {course.elecReqCourse === '1'?'必修':'选修'}</div>
					 {course.elecReqCourse==='1'?<div>审核意见: {course.checkReason}</div>:null}
					 <div>学习积分: {course.studyIntegral}</div>
					 {course.elecReqCourse==='1'?<div>课程职级: {course.jobLevel}</div>:null}
				   </div>*/}

			</div>
	</div>

		)
	}

}
export default CourseManages

